<template>
  <div class="temp-container" id="my-temp">
    <h2>临时功能测试页</h2>
    <div class="title">icon 使用</div>
    <div class="panel">
      <span class=""></span>
    </div>
    <div class="my-charts" ref="myChart"></div>
    <!-- <div style="width:14px;height:14px;background:#ed4523; border-radius: 2px;"></div> -->
    <div style="width:100%; height: 8px; border-radius: 2px; background-color: #999; position:relative;">
      <div style="width: 88.12%; height: 8px; border-radius: 2px; background-color: #FFF;"></div>
      <span style="position: absolute; width: 3px; top: 0; height: 8px; background-color: #ed4523; z-index: 1; left: 66.34%;"></span>
    </div>
    <!-- 圆角代码， -->
    <div style="width:100%;height:100%;background: #192264; border-radius: 8px 0 0 0;"></div>
    <div style="width:100%;height:100%;background: #192264; border-radius: 0 8px 0 0;"></div>
    <div style="width:100%;height:100%;background: #192264; border-radius: 0 0 8px 0;"></div>
    <div style="width:100%;height:100%;background: #192264; border-radius: 0 0 0 8px;"></div>

    <!--小标题 + 感叹号 -->
    <div style="display: flex; align-items: center;">保费收入<span style="display:inline-block;border-radius:50%;width: 20px;height:20px;border:1px solid #999; color: #999; text-align:center; line-height: 20px;margin-left: 10px;font-size: 14px;">!</span></div>

    <!-- 向右三角 -->
    <div style="display: flex; align-items: center;"><span style="display: block; width: 16px; height: 16px; border-top: 2px solid #FFF; border-right: 2px solid #FFF;transform: rotate(45deg);"></span></div>

    <button style="padding: 4px 10px;" onClick="window.parent.postMessage(1234, '*');">追踪</button>

    <div style="color: #FFF; border: 1px solid #FFF; border-radius: 16px; height: 32px; width: 100px; text-align: center; line-height: 30px; font-size: 16px;">追踪</div>

    <!-- 箭头向下 -->
    <div style="display: inline-block; color: #ffb440;vertical-align: middle;">-2.2%</div>
    <div style="position: relative;height:20px;width:20px; border-radius: 50%;background: rgba(255,255,255,0.5); text-align:center; display: inline-block;vertical-align: middle;">
      <div style=" height: 12px; width: 2px; background: #fff; position: absolute; left: 0; top:0; right: 0; bottom: 0; margin: auto;">
        <span style="position: absolute; height: 5px; width: 2px; left: 2px; bottom: 0; transform: rotate(45deg); background: #fff;"></span>
        <span style="position: absolute; height: 5px; width: 2px; right: 2px; bottom: 0; transform: rotate(-45deg); background: #fff;"></span>
      </div>
    </div>

    <!-- 箭头向上 -->
    <div style="display: inline-block; vertical-align: middle; line-height: 24px;">
      <span style="color: #bfc1d4;">同比</span>
      <span style="color: #FFFFFF;">12.2%</span>
    </div>
    <div style="position: relative;height:20px;width:20px;  line-height: 24px; border-radius: 50%;background: rgba(255,255,255,0.5); text-align:center; display: inline-block;vertical-align: middle;">
      <div style=" height: 12px; width: 2px; background: #fff; position: absolute; left: 0; top:0; right: 0; bottom: 0; margin: auto;">
        <span style="position: absolute; height: 5px; width: 2px; right: 2px; top: 0; transform: rotate(45deg); background: #fff;"></span>
        <span style="position: absolute; height: 5px; width: 2px; left: 2px; top: 0; transform: rotate(-45deg); background: #fff;"></span>
      </div>
    </div>


    <div style="display: inline-block; color: #FFFFFF;vertical-align: middle; line-height: 24px;">同比 12.2%</div>
    <div style="position: relative;height:16px;width:16px;  line-height: 16px; border-radius: 50%;background: rgba(255,255,255,0.5); text-align:center; display: inline-block;vertical-align: middle;">
      <div style=" height: 10px; width: 2px; background: #fff; position: absolute; left: 0; top:0; right: 0; bottom: 0; margin: auto;">
        <span style="position: absolute; height: 5px; width: 2px; right: 2px; top: 0; transform: rotate(45deg); background: #fff;"></span>
        <span style="position: absolute; height: 5px; width: 2px; left: 2px; top: 0; transform: rotate(-45deg); background: #fff;"></span>
      </div>
    </div>

    <div style="display: inline-block; vertical-align: middle; line-height: 24px;">
      <span style="color: #FFFFFF;">12.2%</span>
    </div>
    <div style="position: relative;height:20px;width:20px;  line-height: 24px; border-radius: 50%;background: rgba(255,255,255,0.5); text-align:center; display: inline-block;vertical-align: middle;">
      <div style=" height: 12px; width: 2px; background: #fff; position: absolute; left: 0; top:0; right: 0; bottom: 0; margin: auto;">
        <span style="position: absolute; height: 5px; width: 2px; right: 2px; top: 0; transform: rotate(45deg); background: #fff;"></span>
        <span style="position: absolute; height: 5px; width: 2px; left: 2px; top: 0; transform: rotate(-45deg); background: #fff;"></span>
      </div>
    </div>

    <div style="display: flex; justify-content: space-between; align-items: center;">
      <div>近6月同比趋势图</div>
      <div>
        <span style="display: inline-block; vertical-align: middle; width:14px;height:14px;margin-right: 2px; background:#277bff; border-radius: 2px;"></span>
        <span style="display: inline-block; vertical-align: middle;color: #7391d3; margin-right: 10px;">13月</span>
        <span style="display: inline-block; vertical-align: middle; width:14px;height:14px;margin-right: 2px; background:#eef5ff; border-radius: 2px;"></span>
        <span style="display: inline-block; vertical-align: middle;color: #7391d3; margin-right: 10px;">25月</span>
        <span style="display: inline-block; vertical-align: middle; width:14px;height:14px;margin-right: 2px; background:#ff9672; border-radius: 2px;"></span>
        <span style="display: inline-block; vertical-align: middle;color: #7391d3;">37月</span>
      </div>
    </div>

    <div style="display: inline-block; vertical-align: middle; width:14px;height:14px;margin-right: 10px; background:#3768d1; border-radius: 2px;"></div><div style="display: inline-block; vertical-align: middle;color: #7391d3;">2020年</div>
    <div style="display: inline-block; vertical-align: middle; width:14px;height:14px;margin-right: 10px; background:#bed9ff; border-radius: 2px;"></div><div style="display: inline-block; vertical-align: middle;color: #7391d3;">2021年</div>
    <div style="display: inline-block; vertical-align: middle; width:14px;height:14px;margin-right: 10px; background:#ff9672; border-radius: 2px;"></div><div style="display: inline-block; vertical-align: middle;color: #7391d3;">同比</div>

    <div style="display: flex; justify-content: space-between; align-items: center;">
      <div>新业务价值率趋势图</div>
      <div>
        <span style="display: inline-block; vertical-align: middle; width:14px;height:14px;margin-right: 2px; background:#424880; border-radius: 2px;"></span>
        <span style="display: inline-block; vertical-align: middle;color: #7391d3; margin-right: 4px;">2020年</span>
        <span style="display: inline-block; vertical-align: middle; width:14px;height:14px;margin-right: 2px; background:#eef5ff; border-radius: 2px;"></span>
        <span style="display: inline-block; vertical-align: middle;color: #7391d3; margin-right: 4px;">2021年</span>
        <span style="display: inline-block; vertical-align: middle; width:14px;height:14px;margin-right: 2px; background:#ff9672; border-radius: 2px;"></span>
        <span style="display: inline-block; vertical-align: middle;color: #7391d3;">同比</span>
      </div>
    </div>


    <div>
      <span style="display: inline-block; vertical-align: middle; width:14px;height:14px;margin-right: 2px; background:#424880; border-radius: 2px;"></span>
      <span style="display: inline-block; vertical-align: middle;color: #8b8fb1; margin-right: 4px;">2020年新人产能</span>
      <span style="display: inline-block; vertical-align: middle; width:14px;height:14px;margin-right: 2px; background:#eef5ff; border-radius: 2px;"></span>
      <span style="display: inline-block; vertical-align: middle;color: #8b8fb1; margin-right: 4px;">2021年新人产能</span>
    </div>
    <div>
      <span style="display: inline-block; vertical-align: middle; width:14px;height:14px;margin-right: 2px; background:#6068b6; border-radius: 2px;"></span>
      <span style="display: inline-block; vertical-align: middle;color: #8b8fb1; margin-right: 4px;">2020年新人活动率</span>
      <span style="display: inline-block; vertical-align: middle; width:14px;height:14px;margin-right: 2px; background:#ff9672; border-radius: 2px;"></span>
      <span style="display: inline-block; vertical-align: middle;color: #8b8fb1; margin-right: 4px;">2021年新人活动率</span>
    </div>


    <div style="display: inline-block; color: #FFFFFF;vertical-align: middle; line-height: 24px;">同比 12.2%</div>
    <div style="position: relative;height:16px;width:16px;  line-height: 16px; border-radius: 50%;background: rgba(255,255,255,0.5); text-align:center; display: inline-block;vertical-align: middle;">
      <div style=" height: 10px; width: 2px; background: #fff; position: absolute; left: 0; top:0; right: 0; bottom: 0; margin: auto;">
        <span style="position: absolute; height: 5px; width: 2px; right: 2px; top: 0; transform: rotate(45deg); background: #fff;"></span>
        <span style="position: absolute; height: 5px; width: 2px; left: 2px; top: 0; transform: rotate(-45deg); background: #fff;"></span>
      </div>
    </div>

    <!-- 核心指标 ! -->
    <div style="display: flex; align-items: center;">核心指标<span style="display:inline-block;border-radius:50%;width: 20px;height:20px;border:2px solid #335cbb; color: #335cbb; text-align:center; line-height: 20px;margin-left: 10px;font-size: 14px;font-weight: bold;">!</span></div>

    <div style="display: flex; justify-content: space-between; align-items: center;">
      <div>
        <span style="color: #597dcc;">目标</span>
        <span>12.2%</span>
      </div>
      <div style="background:#3d67c4; height: 20px; width: 24px; border-radius: 12px; display: flex; justify-content: center; align-items: center;">
        <span style="display: block; width: 6px; height: 6px; border-top: 2px solid #FFF; border-right: 2px solid #FFF;transform: rotate(45deg); margin-right: 2px;"></span>
      </div>
    </div>

    <div style="display: flex; justify-content: space-between; align-items: center;">
      <div>
        <span style="color: #888caf;">目标</span>
        <span>5.2%</span>
      </div>
      <div style="background:#454c81; height: 20px; width: 24px; border-radius: 12px; display: flex; justify-content: center; align-items: center;">
        <span style="display: block; width: 6px; height: 6px; border-top: 2px solid #FFF; border-right: 2px solid #FFF;transform: rotate(45deg); margin-right: 2px;"></span>
      </div>
    </div>
  </div>
</template>

<script>
// 引入基本模板
const echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
require('echarts/lib/chart/line')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {
  data() {
    return {}
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(this.$refs.myChart)
      // 绘制图表
      myChart.setOption({
        title: {
          text: '当周批转量和报备量',
          left: '5%'
        },
        tooltip: { trigger: 'axis' },
        legend: {
          data: ['批转量', '报备量'],
          right: '5%'
        },
        grid: {
          left: '5%',
          right: '6%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['08-12', '08-13', '08-14', '08-15', '08-16', '08-17', '08-18'],
          axisLine: { lineStyle: { color: '#999', width: 0.1 }},
          splitLine: {
            show: true,
            lineStyle: {
              color: '#999',
              width: 0.1
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLine: { lineStyle: { color: '#999', width: 0.1 }}
        },
        series: [
          {
            name: '批转量',
            type: 'line',
            data: [5, 20, 36, 10, 10, 20, 0],
            areaStyle: {
              color: 'rgb(237,252,245)'
            },
            smooth: true,
            itemStyle: {
              normal: {
                color: '#53e59d'
              }
            }
          },
          {
            name: '报备量',
            type: 'line',
            data: [15, 0, 36, 10, 10, 0, 0],
            areaStyle: {
              color: 'rgb(220,247,245)'
            },
            smooth: true,
            itemStyle: {
              normal: {
                color: '#43c4fd'
              }
            }
          }
        ]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.temp-container {
  padding: 10px;
  .title {
    background: #2e2868;
  }
  .panel {
    padding: 20px 0;
  }
}
</style>
